<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加新菜品 - 肯德基管理系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KFC</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/dish_save.css">
    <link rel="shortcut icon" href="images/kfc-logo-v2.png" >
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/dish_save.js"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>添加新菜品</h1>
    </header>

    <div class="success-message" id="successMessage">
        菜品添加成功！
    </div>

    <div class="form-container" id="app">
        <form id="dishForm"  method="post">
            <div class="form-group">
                <label for="dishName">菜品名称</label>
                <input type="text" id="dishName" name="dishName" placeholder="请输入菜品名称" v-model="dish.dishName">
                <div class="error-message" id="nameError">请输入菜品名称</div>
            </div>
            <div class="form-group">
                <label for="dishName">菜品类别id</label>
                <input type="text" id="dishType" name="dishType" placeholder="请输入菜品类别id" v-model="dish.typeId">
                <div class="error-message"  >请输入菜品类别id</div>
            </div>

            <!--  <div class="form-group">
                <label for="dishCategory">菜品类别</label>
                <select id="dishCategory" name="dishCategory">
                  <option value="">请选择类别</option>
                  <option value="汉堡">汉堡</option>
                  <option value="小食">小食</option>
                  <option value="甜品">甜品</option>
                  <option value="饮料">饮料</option>
                  <option value="套餐">套餐</option>
                </select>
                <div class="error-message" id="categoryError">请选择菜品类别</div>
              </div>-->

            <div class="form-group">
                <label for="dishPrice">价格 (元)</label>
                <input type="number" id="dishPrice" name="dishPrice" placeholder="请输入价格" min="0"   v-model="dish.dishPrice">
                <div class="error-message" id="priceError">请输入有效的价格</div>
            </div>


            <button type="submit" class="btn" @click="saveDish">添加菜品</button>
        </form>
    </div>
</div>

<script>
    //1. 创建vue对象
    const vm = new Vue({
        el:"#app",  // 获得网页中id='app' 的元素 element
        data:{
            dish:{
                dishName:'',
                typeId:"",
                dishPrice:""
            }
        },
        methods:{
            saveDish(){
                // post ， http://localhost:8080/kfc/dish
                //response : controller的响应结果
                axios.post("dish",this.dish)
                    .then(response=>{
                        console.log(response)
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        }
    })
</script>

</body>
</html>